<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电影</title>
		<link rel="icon" href="../static/img/01.png" type="image/x-icon" />
		<link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css" />
		<style>
			.card-img-overlay {
				color: transparent;
				top: auto;
			}

			.card-img-overlay:hover {
				background-color: white;
				color: gray;
			}
			.card-img-top {
				width: 100%;
				height: 280px;
			}
		</style>
	</head>
	<body>
		<!-- 导航栏 -->
		<div id="header"></div>
		<!-- 导航 -->
		<div class="container-fluid pt-3 mt-5">
			<nav class="navbar navbar-light navbar-expand border-top" style="background-color: #aaffff;">
				<div class="collapse navbar-collapse justify-content-center">
					<!-- 选项卡 -->
					<ul class="nav navbar-nav nav-tabs">
						<li class="nav-item ml-md-5 mr-md-5 ml-4 mr-4">
							<a class="nav-link active nav-tabs reYing" href="#reYing" data-toggle="tab">正在热映</a>
						</li>
						<li class="nav-item ml-md-5 mr-md-5 ml-4 mr-4">
							<a class="nav-link nav-tabs shangYing" href="#shangYing" data-toggle="tab">即将上映</a>
						</li>
						<li class="nav-item ml-md-5 mr-md-5 ml-4 mr-4">
							<a class="nav-link nav-tabs yingPian" href="#yingPian" data-toggle="tab">经典影片</a>
						</li>
					</ul>
				</div>
			</nav>
		</div>

		<!-- 电影版块 -->
		<!-- 选项卡 -->
		<div class="tab-content m-4 pt-3">
			<div class="tab-pane fade show active" id="reYing">
				<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 m-auto" data-role="listview" id="one"></div>
			</div>
			<div class="tab-pane fade" id="shangYing">
				<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 m-auto" data-role="listview" id="two"></div>
			</div>
			<div class="tab-pane fade" id="yingPian">
				<div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 m-auto" data-role="listview" id="three"></div>
			</div>
		</div>
		<!-- 分页 -->
		<nav aria-label="Page navigation example" class="font-weight-bold text-dark" id="page">
			<ul class="pagination justify-content-center" id="buttons"></ul>
			<div class="text-center" id="pagination"></div>
		</nav>
		<!-- 页脚 -->
		<div class="mt-5" id="footer"></div>
	</body>
	<!-- js -->
	<script src="../static/js/jquery-3.2.1.min.js"></script>
	<script src="../static/js/jquery.mobile-1.4.5.js?ver=1.4.5"></script>
	<script src="../static/js/jquery.tmpl.js"></script>
	<script src="../static/js/bootstrap.bundle.min.js"></script>
	<script src="../static/js/TSMSys.hotelsAjax.js"></script>
	<!-- 电影板块模板 -->
	<!-- 卡片 -->
	<script data-role="listview" id="myTemplate" type="text/x-jquery-tmpl">
		<div class="col mb-4">
			<a href="details?office=${m_link}?id=${m_id}" class="text-decoration-none"><div class="card">
				<img src="${m_src}" class="card-img-top" alt="${m_name}">
				<div class="card-img-overlay">
					<h5 class="card-title text-truncate">${m_name}</h5>
					<div class="card-text text-truncate">类型: ${m_type}</div>
					<div class="card-text text-truncate">主演: ${m_actors}</div>
					<div class="card-text text-truncate">上映时间: ${m_time}</div>
				</div>
			</div>
			<div class="text-center text-black-50 font-weight-bold mt-2">${m_name}</div></a>
		</div>
	</script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			read(1,'moviesrys','#one','#reYing');
		});
		
		$(function() {
			$('#header').load('header');
			$('#footer').load('footer');
			$('.reYing').click(function() {
				read(1,'moviesrys','#one','#reYing');
			})
			$('.shangYing').click(function() {
				read(1,'moviessys','#two','#shangYing');
			})
			$('.yingPian').click(function() {
				read(1,'moviesyps','#three','#yingPian');
			})
		});
		<!--创建分页按钮-->
		function addbutton(i,s,mv,q,p) {
			$("#buttons").remove();
			$("#page").append("<ul class='pagination justify-content-center' id='buttons'></ul>");
			if(i!=1){
				n=i-1;
				$("#prev").remove();
				html = '<li class="page-item" id="prev" onclick="read('+n+',\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link" aria-label="Next"><span aria-hidden="true">上一页</span></a></li>';
				$("#buttons").append(html);
			}else{
				$("#prev").remove();
			}
			html = "";
			if (s>6&&(i==1||i==2||i==3)){
				html += '<li class="page-item" onclick="read(1,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">1</a></li>';
				html += '<li class="page-item" onclick="read(2,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">2</a></li>';
				html += '<li class="page-item" onclick="read(3,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">3</a></li>';
				if(i==3){
					html += '<li class="page-item" onclick="read(4,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">4</a></li>';
				}
				html += '<li class="page-item"><a class="page-link">...</a></li>';
				html += '<li class="page-item" onclick="read(12,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">12</a></li>';
			}
			if(s>6&&i>3&&i<10&&i<s){
				html += '<li class="page-item" onclick="read(1,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">1</a></li>';
				html += '<li class="page-item"><a class="page-link">...</a></li>';
				html += '<li class="page-item" onclick="read('+(i-1)+',\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">'+(i-1)+'</a></li>';
				html += '<li class="page-item" onclick="read('+i+',\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">'+i+'</a></li>';
				html += '<li class="page-item" onclick="read('+(i+1)+',\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">'+(i+1)+'</a></li>';
				html += '<li class="page-item"><a class="page-link">...</a></li>';
				html += '<li class="page-item" onclick="read(12,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">12</a></li>';
			}
			if(i>9){
				html += '<li class="page-item" onclick="read(1,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">1</a></li>';
				html += '<li class="page-item"><a class="page-link">...</a></li>';
				html += '<li class="page-item" onclick="read(9,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">9</a></li>';
				html += '<li class="page-item" onclick="read(10,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">10</a></li>';
				html += '<li class="page-item" onclick="read(11,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">11</a></li>';
				html += '<li class="page-item" onclick="read(12,\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">12</a></li>';
			}
			if(s<7){
				for (i=1; i <= s; i++) {
					html += '<li class="page-item" onclick="read('+i+',\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link">'+i+'</a></li>';
				}
			}
			$("#buttons").append(html);
		}
		
		/*i:第几页;mv:接口地址;q:要插入代码内容的位置;p:要插入的选项卡位置;*/
		function read(i,mv,q,p) {
			$.ajax({
				type: 'POST',
				url: "http://localhost:8080/maoyan/"+mv,
				dataType: "json",
				data: {
					"page": i
				},
				abortOnRetry: true,
				success: function(data) {
					console.log(data);
					$("#pagination").text("第"+i+"页/共"+data['pageMax']+"页");
					$(q).remove();
					$(p).append("<div class='row row-cols-2 row-cols-md-4 row-cols-lg-6 m-auto' data-role='listview' id='"+q.replace("#","")+"'></div>");
					// 将json对象载入模板,并插入到q末尾中去	
					$('#myTemplate').tmpl(data['list']).appendTo(q);
					addbutton(i,data['pageMax'],mv,q,p);
					if(i<data['pageMax']){
						n=i+1;
						$("#next").remove();
						ht ='<li class="page-item" id="next" onclick="read('+n+',\''+mv+'\''+',\''+q+'\''+',\''+p+'\')"><a class="page-link" aria-label="Next"><span aria-hidden="true">下一页</span></a></li>';
						$("#buttons").append(ht);
					}else{
						$("#next").remove();
					}
				},
				error: function() {
					alert(mv+"数据库连接不成功");
				},
			})
		}
	</script>
</html>
